<template>
    <div class="loginImg">
        <el-form 
            :model="form"
            status-icon
            :rules="rules"
            ref="form"
            class="loginContainer"
        >
            <h3 class="loginTitle">邮箱登录</h3>
            <el-form-item
                label="邮箱"
                label-width="80px"
                prop="username"
            >
                <el-input
                    type="input"
                    v-model="form.email"
                    autocomplete="off"
                    placeholder="请输入账号"
                >
                </el-input>
            </el-form-item>

            <el-form-item
                label="验证码"
                label-width="80px"
                prop="password"
            >
                <el-input
                    type="password"
                    v-model="form.code"
                    autocomplete="off"
                    placeholder="请输入验证码"
                    style="width:158px"
                >
                </el-input>
                <el-button @click="getCode" :disabled="!show">
                    <span v-show="show">发送验证码</span>
                    <span v-show="!show">{{count}}</span>
                </el-button>
            </el-form-item>

            <el-form-item class="loginSubmit">
                <!-- <el-button @click="register" class="loginSubmit" style="margin-right:15px;">注册</el-button> -->
                <el-button type="primary" size="medium"  @click="login" class="loginSubmit">登录</el-button>
            </el-form-item>
            <router-link to="/login">
                <el-link class="email">普通登录注册</el-link>
            </router-link>
            
            
        </el-form>
    </div>
        
</template>

<script>
import cookie from '../cookie/index'
import jwtDecode from 'jwt-decode' //解析token
const Time = 60
export default({
    name:'login',
    data() {
        return {
            show:true,
            count:'',
            timer:null,
            form:{
                email:'',
                code:''
            },
            rules:{
                email:[
                    { required:true, message:"请输入邮箱",trigger:"blur" },
                    {
                        // min:3,
                        // message:'用户名不能小于3位',
                        trigger:"blur"
                    }
                ],
                code:[
                    { required:true, message:"请输入验证码",trigger:"blur" }
                ]
            }
        }
    },
    methods: {
        //获取验证码
        getCode(){
            if(this.form.email === ''){
                this.$message({
                    type:'warning',
                    message:'请先输入邮箱！'
                })
            }else if(this.form.email.search(/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.(?:com|cn)$/) != -1){
                //倒计时
                if(!this.timer){
                    this.count = Time
                    this.show = false
                    this.timer = setInterval(() => {
                        if(this.count > 0 && this.count <= Time){
                            this.count--
                        }else{
                            this.show = true
                            clearInterval(this.timer)
                            this.timer = null
                        }
                    }, 1000)
                }
                this.$http({
                    url:'/shops/login_and_register/email/sendMailCode',
                    method:'POST',
                    params:{
                        to:this.form.email
                    },
                }).then(data=> {
                    console.log(data);
                    if(data.data.code === 200){
                        this.$message({
                            type:'success',
                            message:'已发送验证码，请注意查收'
                        })
                    }else{
                        this.$message({
                            type:'error',
                            message:'请求超时，请检查网络设置'
                        })
                    }
                }).catch(err => {
                    console.log(err);
                })
            }else{
                this.$message({
                    type:'warning',
                    message:'邮箱格式错误'
                })
            }
        },
        //登录
        login(){
            if(this.form.email === '' || this.form.code === ''){
                this.$message({
                    type:'warning',
                    message:'请完整输入用户名与密码'
                })
            }else if(this.form.email.search(/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.(?:com|cn)$/) != -1){
                this.$http({
                    url:'/shops/login_and_register/email/loginByEmail',
                    method:'POST',
                    params:{
                        code:this.form.code,
                        email:this.form.email
                    },
                }).then(data=>{
                    console.log(data);
                    if(data.data.message === '验证码已失效，请重新发送'){
                        this.$message({
                            type:'error',
                            message:'验证码错误或已失效'
                        })
                    }else{
                        cookie.setToken('Bearer '+data.data.data)
                        const value =  jwtDecode('Bearer '+data.data.data);
                        console.log(value);
                        this.$message({
                            message:'登录成功',
                            type:'success',
                            center:true
                        })
                        if(value.permission == 'ADMIN'){
                            this.$router.push({ name: 'home' })
                        }else{
                            this.$router.push({ name: 'main' })
                        }
                    }
                }).catch(err => {
                    console.log(err);
                    this.$message({
                        type:'success',
                        message:'请求超时，请检查网络设置'
                    })
                })
            }else{
                this.$message({
                    type:'error',
                    message:'邮箱格式错误'
                })
            }
        },
        register(){

        }
    },
})
</script>

<style scoped>
.loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
    margin: 0px auto 30px auto;
    text-align: center;
    color: #505458;
}
.loginSubmit{
    margin: 10px auto 0px auto;
    width: 320px;
    /* margin: 0 auto; */
    /* margin: 0; */
    text-align: center;
}
.email{
    font-size: 12px;
}
</style>